<template>
	<view class="content">
		<image class="bottomBg" :src="curBgUrl" mode="widthFix"></image>
		<view class="bottom">
			<view class="bottomContent">
				<image class="bottomTitle" :src="curUrl" :style="{width: imgWidth}" mode="widthFix" @click="goToMiniPorgram"></image>
				<image class="shareIcon" src="../../static/index/share_icon.png" mode="widthFix" @click="shareAction"></image>
				<button class="shareIcon" open-type="share" type="default" style="margin-top: -92rpx; background: rgba(0,0,0,0);"></button>
			</view>
		</view>
	</view>
</template>
<script>
	export default {
		props:["currProject"],
		data() {
			return {
				curUrl: "",
				curBgUrl: "",
				bgTop: 0,
				imgWidth: '0rpx',
				appId:''
			};
		},
		mounted() {
			if(this.currProject=="akl"){
				this.imgWidth = '305rpx';
			}else if(this.currProject=="cqts"){
				this.imgWidth = '416rpx';
			}else if(this.currProject=="hnsd"){
				this.imgWidth = '339rpx';
			}else if(this.currProject=="hnsm"){
				this.imgWidth = '328rpx';
			}else if(this.currProject=="qhd"){
				this.imgWidth = '472rpx';
			}else if(this.currProject=="szsjsg"){
				this.imgWidth = '500rpx';
			}else if(this.currProject=="tnxd"){
				this.imgWidth = '328rpx';
			}else if(this.currProject=="w3"){
				this.imgWidth = '452rpx';
			}
			
			this.curUrl = `https://dm.static.elab-plus.com/csc20201001/${this.currProject}-bottom-content.png`;
			this.curBgUrl = `https://dm.static.elab-plus.com/csc20201001/${this.currProject}-bottom-content-bg.png`;
		},
		methods:{
			goToMiniPorgram(){
				if(appId){
					uni.navigateToMiniProgram({
					  appId: appId,
					  path: '',
					  success(res) {
					    // 打开成功
					  }
					})
				}
			},
			shareAction(){
				this.$u.mpShare = {
					title: 'Elab未来人居', // 默认为小程序名称，可自定义
					path: '', // 默认为当前页面路径，一般无需修改，QQ小程序不支持
					imageUrl: '' 
				}
			}
		},
		onShareAppMessage(res) {
		    if (res.from === 'button') {// 来自页面内分享按钮
		      console.log(res.target)
		    }
		    return {
		      title: '',
		      path: ''
		    }
		  }
	}
</script>

<style lang="scss">
	.content {
		width: 750rpx;
		position: relative;
	}
	.bottomBg {
		width: 100%;
		z-index: -3;
		position: absolute;
		top: 0rpx;
		left: 0;
	}
	.bottom {
		width: 750rpx;
		position: relative;
		
		.bottomContent {
			width: 100%;
			height: 100%;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			.bottomTitle {
				width: 328rpx;
				margin-top: 250rpx;
				margin-bottom: 116rpx;
			}
			.shareIcon {
				width: 280rpx;
				height: 92rpx;
			}
			button::after{ border: none; }
		}
	}

</style>
